<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="zxh">
    <title>图片切换</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        ul,
        li,
        h3,
        p {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        main {
            width: 200px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        
        main h3 {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-weight: normal;
            font-size: 16px;
            background-color: lightgray;
        }
        
        main ul {
            padding: 5px;
            overflow: hidden;
        }
        
        main li {
            width: 180px;
            height: 150px;
            margin: 5px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }
        
        main li div {
            width: 360px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        main li div img {
            float: left;
        }
        
        main p {
            width: 180px;
            height: 20px;
            text-align: center;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
        }    
        main .text1 {
            background-color: lightcoral;
        }
        
        main .text2 {
            background-color: #0d404a;
        }       
        main .text3 {
            background-color: cornflowerblue;
        }
        
    </style>
</head>

<body>
    <main>
        <h3>专辑推荐</h3>
        <ul>
            <li id="list">
                <div id="box">
                    <img src="images/1_1.jpg" alt="">
                    <img src="images/1_2.jpg" alt="">
                </div>
                <p id="p1" class="text1">COCOON/可可尼</p>
                <p id="p2" class="text1">1</p>
            </li>
            <li id="list1">
                <div id="box1">
                    <img src="images/2_1.jpg" alt="">
                    <img src="images/2_2.jpg" alt="">

                </div>
                <p id="p3" class="text2">COCOON/可可尼</p>
                <p id="p4" class="text2">2</p>
            </li>
            <li id="list2">
                <div id="box2">
                    <img src="images/3_1.jpg" alt="">
                    <img src="images/3_2.jpg" alt="">
                </div>
                <p id="p5" class="text3">COCOON/可可尼</p>
                <p id="p6" class="text3">3</p>
            </li>
        </ul>
    </main>
</body>

</html>
<script src="js/jquery.js"></script>
<script>
    $('#list').hover(function () {
        $('#box').stop().animate({
            left: -180
        }, 200)

        $('#p1').slideUp(200)
        $('#p2').slideDown(200)

    }, function () {
        $('#box').stop().animate({
            left: 0
        }, 200)

        $('#p2').slideUp(200)
        $('#p1').slideDown(200)
    })


    $('#list1').hover(function () {
        $('#box1').stop().animate({
            left: -180
        }, 200)

        $('#p3').slideUp(200)
        $('#p4').slideDown(200)
    }, function () {
        $('#box1').stop().animate({
            left: 0
        }, 200)

        $('#p4').slideUp(200)
        $('#p3').slideDown(200)
    })

    $('#list2').hover(function () {
        $('#box2').stop().animate({
            left: -180
        }, 200)
        $('#p5').slideUp(200)
        $('#p6').slideDown(200)
    }, function () {
        $('#box2').stop().animate({
            left: 0
        }, 200)
        $('#p6').slideUp(200)
        $('#p5').slideDown(200)
    })

</script>